<!-- views/generalview/components/power-detail.vue -->
<template>
  <div>
    <a-card class="chart-container" :title="chartInfo.cardName" style="margin-top: 10px">
      <template #extra>
        <timebar @change="timeBarChange" isCurrentDateDisabled />
      </template>
      <a-spin :loading="loading" class="chart-view">
        <CustomChart :options="chartInfo.echartsOption" style="height: 300px" />
      </a-spin>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import timebar from '../../../components/timebar/index.vue'
import { getTimeObject, handleConfigChart } from '../../../utils/charts'
import { getChartInfo } from '../../../apis/home-pv'
import CustomChart from '../../../components/custom-chart/index.vue'
import useLoading from '../../../utils/loading'

const { loading, setLoading } = useLoading(true)

interface IChartInfo {
  cardName: string
  echartsOption: any
  singleInfo: null | any
}

const chartInfo = ref<IChartInfo>({
  cardName: '',
  echartsOption: {},
  singleInfo: null
})

const timeOptions = ref<any>({})

const timeBarChange = async (timer: any) => {
  timeOptions.value = timer
  await fetchData()
}

const fetchData = async () => {
  try {
    setLoading(true)
    const params = {
      configId: '280',
      cardKey: '1719898834533',
      ...getTimeObject(timeOptions.value)
    }

    const res: any = await getChartInfo(params)
    if (res.data.code == 200) {
      chartInfo.value = {
        ...res.data.data,
        echartsOption: handleConfigChart(res.data.data.echartsOption)
      }
    } else {
      chartInfo.value = {
        cardName: '',
        echartsOption: {},
        singleInfo: null
      }
    }
  } catch (error) {
    console.error('获取图表数据时出错:', error)
  } finally {
    setLoading(false)
  }
}
</script>

<style scoped lang="less">
.chart-container {
  height: 100%;
  width: 100%;

  :deep(.arco-card-body) {
    width: 100%;
    height: calc(100% - 46px);
  }

  .chart-view {
    width: 100%;
    height: 100%;
  }
  .arco-empty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
}
</style>